<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
            color: activeColor, fontSize: fontSize + 'px' 
        </div>

        <!-- 对象式样式Style语法 -->
        <div v-bind:style="styleObject">
            styleObject
        </div>

        <!-- 数组语法 -->
        <div v-bind:style="[baseStyles, overridingStyles]">
            baseStyles + overridingStyles
        </div>

        <!--
        自动添加前缀
        当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，
        如 transform，Vue.js 会自动侦测并添加相应的前缀。 
        -->

        <!-- 
            这样写只会渲染数组中最后一个被浏览器支持的值。
            在本例中，如果浏览器支持不带浏览器前缀的 flexbox，
            那么就只会渲染 display: flex
         -->
        <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
            display: ['-webkit-box', '-ms-flexbox', 'flex'] 
        </div>
    </div>
    <script src="vue.js"></script>
</body>
</html>